<template>
  <div class="sign-up-info">
    <div class="search-content">
      <el-input
        class="search-content-input"
        v-model="searchContent.groupName"
        placeholder="请输入团购名称"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.userName"
        placeholder="请输入姓名"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.userPhone"
        placeholder="请输入电话"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.signUpChannel"
        placeholder="请输入报名渠道"
				v-if="!externalData"
      ></el-input>
      <el-input
        class="search-content-input"
        v-model="searchContent.employeeName"
        placeholder="请输入员工姓名"
      ></el-input>
      <el-select v-model="searchContent.payStatus" placeholder="请选择支付状态">
        <el-option
          v-for="item in payStatusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
      <el-table :data="signUpInfoList" border :height="oHeight" header-cell-class-name="hdCellStyle">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          min-width="60"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="userName"
          label="姓名"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="userPhone"
          label="电话"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          label="订单编号"
          prop="orderSerialNumber"
          min-width="140"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="groupName"
          label="团购名称"
          min-width="100"
        >
        </el-table-column>
        <el-table-column align="center" label="报名时间" min-width="130">
          <template slot-scope="scope">
            <span>{{
              scope.row.signUpTime | dateFormatter("YYYY-MM-DD hh:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="channel"
          label="渠道"
          min-width="90"
					v-if="!externalData"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="intentionMoney"
          label="意向金"
          min-width="90"
        >
        </el-table-column>
        <el-table-column align="center" label="支付状态" min-width="90">
          <template slot-scope="scope">
            <span>{{ judgeSignUpStatus(scope.row.payStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button
                :type="scope.row.getrefund_status.type"
                :disabled="scope.row.getrefund_status.disabled || !scope.row.intentionMoney || parseFloat(scope.row.intentionMoney) <= 0"
                @click="refund(scope.row)"
              >
                {{ scope.row.getrefund_status.text }}</el-button
              >
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="btn-group">
          <a class="btn-bottom" :href="exportLink">导出</a>
        </div>
        <div class="paginationOne">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { resize } from "@/common/js/height.js";
import Qs from "qs";

export default {
	props: {
    externalData: { // 注意此属性不要删除，当此组件被单独引入第三方组件时候的父组件传值属性
			type: Object,
			default: null
		} 
	},
  data() {
    return {
      payStatusList: [
        { label: "未支付", value: 1 },
        { label: "已支付", value: 2 },
        { label: "已退款", value: 3 },
        { label: "已取消", value: 4 },
      ],
      oHeight: 800,
      searchContent: {
        groupName: "",
        userName: "",
        userPhone: "",
        payStatus: "",
        signUpChannel: "",
        employeeName: "",
        originate: '', //渠道ID
        filter_not_yt: null
      },
      signUpInfoList: [],
      total: 0,
    };
  },
  computed: {
    exportLink() {
      const data = {};
      data.export = "yes";
      data.title_name = this.searchContent.groupName;
      data.user_name = this.searchContent.userName;
      data.user_mobile = this.searchContent.userPhone;
      data.pay_status = this.searchContent.payStatus;
      data.channel_name = this.searchContent.signUpChannel;
      data.employee_name = this.searchContent.employeeName;
      data.originate = this.searchContent.originate;
      if(this.searchContent.filter_not_yt) data.filter_not_yt = this.searchContent.filter_not_yt;
      let domain = document.domain;
      if (domain != "admin.mycjj.com" && domain != "admin.chejj.cn") {
        domain = "admin.chejj.cn";
      }
      return (
        location.protocol +
        "//" +
        domain.replace("admin", "api") +
        "/admin/newCarGroupBuy/index.php?act=signup&op=list&" +
        Qs.stringify(data)
      );
    },
  },
  methods: {
    judgeSignUpStatus(n) {
      switch (n) {
        case 1:
          return "未支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已退款";
          break;
        default:
          return "已取消";
      }
    },
    refund(item) {
      let that = this;
	  this.$confirm("确认退款").then(res =>{
		this.$http
        .post("/admin/bill/index.php?act=commonRefund&op=refund", {
          pay_ordersn: item.orderSerialNumber,
        })
        .then((res) => {
          if (res.code == 1) {
            that.getListData(); //刷新列表
          } else {
            alert(res.msg);
          }
        });
	  })
    },
    resetSearchData() {
      this.searchContent.groupName = "";
      this.searchContent.userName = "";
      this.searchContent.userPhone = "";
      this.searchContent.payStatus = "";
      this.searchContent.signUpChannel = "";
      this.searchContent.employeeName = "";
    },
    search() {
      this.searchContent.currentPage = 1;
      this.getListData();
    },
    handleSizeChange(pageSize) {
      this.searchContent.pageSize = pageSize;
      this.searchContent.currentPage = 1;
      this.getListData();
    },
    handleCurrentChange(page) {
      this.searchContent.currentPage = page;
      this.getListData();
    },
    getListData() {
      var that = this;
      const data = {};
      data.page = this.searchContent.currentPage;
      data.eachNum = this.searchContent.pageSize;
      data.title_name = this.searchContent.groupName;
      data.user_name = this.searchContent.userName;
      data.user_mobile = this.searchContent.userPhone;
      data.pay_status = this.searchContent.payStatus;
      data.channel_name = this.searchContent.signUpChannel;
      data.employee_name = this.searchContent.employeeName;
      data.originate = this.searchContent.originate;
      if(this.searchContent.filter_not_yt) data.filter_not_yt = this.searchContent.filter_not_yt;
      this.$http
        .post("/admin/newCarGroupBuy/index.php?act=signup&op=list", data)
        .then((res) => {
          if (res.code == 1) {
            if (res.data && res.data.list.length) {
              this.signUpInfoList = res.data.list.map(function(item) {
                return {
                  id: item.ncs_id,
                  userName: item.ncs_user_name,
                  userPhone: item.ncs_user_mobile,
                  orderSerialNumber: item.ncs_order_sn,
                  groupName: item.ncs_title_name,
                  signUpTime: item.ncs_addtime * 1000,
                  channel: item.ncs_channel_name
                    ? item.ncs_channel_name
                    : item.ncs_employee_name
                    ? item.ncs_employee_name
                    : "",
                  intentionMoney: item.ncs_intention_gold,
                  payStatus: item.ncs_status * 1,
                  refund_status:item.refund_status * 1,
                  getrefund_status: that.getRefundStaus(item.refund_status * 1),
                };
              });
              this.total = parseInt(res.data.totalNum);
            } else {
              this.signUpInfoList = [];
              this.total = 0;
            }
          } else if (res.code == 2001) {
            this.signUpInfoList = [];
            this.total = 0;
          } else {
            alert(res.msg);
          }
        });
    },
    getRefundStaus(staus) {
      let type = "";
      let text = "";
      let disabled = false;
      switch (staus) {
        case 0:
          type = "primary";
          text = "退款";
          disabled = false;
          break;
        case 10:
          type = "info";
          text = "退款中";
          disabled = true;
          break;
        case 20:
          type = "info";
          text = "已退款";
          disabled = true;
          break;
        case 30:
          type = "info";
          text = "退款失败";
          disabled = true;
          break;
      }
      let a = {
        type,
        text,
        disabled,
      };
      return a;
    },
  },
  mounted() {
    resize(this);
  },
  created() {
		if (this.externalData && this.externalData.filter_not_yt) {
			// this.searchContent.originate = this.externalData.originate;
      this.searchContent.filter_not_yt = this.externalData.filter_not_yt
		}
    this.getListData();
  },
  name: "sign-up-info",
};
</script>

<style lang="scss" scoped>
.sign-up-info {
  .search-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-input {
      width: 200px;
    }
    .time-range-wrapper {
      .time-range-label {
        font-size: 14px;
      }
      display: flex;
      align-items: center;
      /deep/.el-range-separator {
        box-sizing: content-box;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.btn-bottom {
  background: #409eff;
  color: #fff;
  border: 0;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 3px;
  display: inline-block;
}
</style>
